<template>
	<view class="qiun-charts">
		<view class="charts-box">
			<qiun-data-charts type="column" :chartData="chartData" :opts="opts" />
		</view>
		<view style="margin-left: 60rpx;align-self: flex-start;">
			<view class="item">
				<view style="background-color: #A3F680;" class="item-color"></view>
				<view v-if="dimensionScoresCompare.length > 0" style="background-color: #3AC300; margin-left: 10rpx;"
					class="item-color"></view>
				<text class="item-name">超常</text>
				<text>130分及130分以上</text>
			</view>
			<view class="item">
				<view style="background-color: #DDFD30;" class="item-color"></view>
				<view v-if="dimensionScoresCompare.length > 0" style="background-color: #A1BF00; margin-left: 10rpx;"
					class="item-color"></view>
				<text class="item-name">优秀</text>
				<text>115分——129分</text>
			</view>
			<view class="item">
				<view style="background-color: #FFFF00;" class="item-color"></view>
				<view v-if="dimensionScoresCompare.length > 0" style="background-color: #D1B500; margin-left: 10rpx;"
					class="item-color"></view>
				<text class="item-name">正常</text>
				<text>85分——114分</text>
			</view>
			<view class="item">
				<view style="background-color: #FFAB00;" class="item-color"></view>
				<view v-if="dimensionScoresCompare.length > 0" style="background-color: #EE9500; margin-left: 10rpx;"
					class="item-color"></view>
				<text class="item-name">落后</text>
				<text>70分——84分</text>
			</view>
			<view class="item">
				<view style="background-color: #FF8E00;" class="item-color"></view>
				<view v-if="dimensionScoresCompare.length > 0" style="background-color: #DD5900; margin-left: 10rpx;"
					class="item-color"></view>
				<text class="item-name">偏低</text>
				<text>69分——69分以下</text>
			</view>
		</view>
	</view>
</template>

<script>
	const barColors = ['#FF8E00', '#FFAB00', '#FFFF00', '#DDFD30', '#A3F680', '#f0f0f0']
	const barColors1 = ['#DD5900', '#EE9500', '#D1B500', '#A1BF00', '#3AC300', '#f0f0f0']
	export default {
		name: 'AssessScoresChart',
		props: {
			dimensionScores: {
				type: Array,
				default () {
					return []
				}
			},

			dimensionScoresCompare: {
				type: Array,
				default () {
					return []
				}
			},
		},
		data() {
			return {
				chartData : {},
				opts: {
					"dataLabel": false,
				}
			}
		},

		created() {
			this.initData();
		},

		methods: {
			getResult(value, barColors) {
				let color = '';
				let str = ''
				if (value < 70) {
					color = barColors[0];
					str = '偏低'
				} else if (value < 85) {
					color = barColors[1]
					str = '落后'
				} else if (value < 115) {
					color = barColors[2]
					str = '正常'
				} else if (value < 130) {
					color = barColors[3]
					str = '优秀'
				} else {
					color = barColors[4]
					str = '超常'
				}
				return {
					color,
					str
				}
			},

			initData() {
				const that = this;
				let label = [],
					devArr = [],
					devArrCompare = [];
				let totalScore = 0;
				var seriesArray = [];

				this.$props.dimensionScores.map(x => {
					if (x.dimensionId === '2c92848567977b50016797a129d909b4') {
						return
					}
					totalScore += parseFloat(x.dqFraction);
					label.push(x.dimensionName);
					devArr.push({
						value: parseFloat(x.dqFraction.toFixed()),
						itemStyle: {
							color: this.getResult(x.dqFraction, barColors).color
						},
						label: {
							show: true,
							position: 'inside',
							color: '#333333'
						},
						color: this.getResult(x.dqFraction, barColors1).color
					})
				})


				if (this.$props.dimensionScoresCompare.length > 0) {
					this.$props.dimensionScoresCompare.map(x => {
						if (x.dimensionId === '2c92848567977b50016797a129d909b4') {
							return
						}
						devArrCompare.push({
							value: parseFloat(x.dqFraction.toFixed()),
							itemStyle: {
								color: this.getResult(x.dqFraction, barColors1).color
							},
							label: {
								show: true,
								position: 'inside',
								color: '#333333'
							},
							color: this.getResult(x.dqFraction, barColors1).color
						})
					})
					seriesArray[0] = {
						barGap: 0,
						data: devArr,
						type: 'bar',
					};
					seriesArray[1] = {
						data: devArrCompare,
						type: 'bar',
					};
				} else {
					label.push('综合评价')
					let ava = totalScore / devArr.length;
					devArr.push({
						value: parseFloat(ava.toFixed(0)),
						itemStyle: {
							color: this.getResult(ava, barColors).color
						},
						label: {
							show: true,
							position: 'inside',
							color: '#333333'
						},
						color: this.getResult(ava, barColors).color
					})
					seriesArray[0] = {
						barGap: 0,
						data: devArr,
						type: 'bar',
						color: '#ffffff',
						name: ''
					};
				}

				var option = {
					title: {
						text: '发育商',
						textStyle: {
							fontSize: 14,
							color: '#50576a'
						},
						left: 'center',
						top: 0
					},
					color: barColors,
					dataZoom: [{
						preventDefaultMouseMove: false
					}],
					legend: {
						selectedMode: false
					},
					grid: {
						top: 40,
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: label,
						axisLabel: {
							rotate: 45,
							fontSize: 10,
						}
					},
					yAxis: {
						axisLabel: {
							show: true,
							fontSize: 10,
						},
						type: 'value',
						max: 150,
						min: 0,
					},
					series: seriesArray,
					categories: [
						'精细动作',
						'适应能力',
						'语音',
						'社会行为',
						'大动作',
						'综合评价'
					],
				};
				console.log(option);
				this.chartData = option;
			}
		}
	}
</script>

<style>
	.charts-box {
	  width: 100%;
	  height: 300px;
	}
	
	.qiun-charts {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.item {
		display: flex;
		flex-direction: row;
		color: #50576a;
		font-size: 24rpx;
		align-items: center;
		margin-top: 5rpx;
	}

	.item-color {
		width: 30rpx;
		height: 30rpx;
	}

	.item-name {
		margin-left: 10rpx;
		margin-right: 20rpx;
	}
</style>
